// import { add_class, remove_class } from '../../../class_operate/Func';
import { remove_class } from '../../../class_operate/Func';
import { animation_obj } from '../../../css/Classes/cla_animation_obj';
import { getElementViewOffsetPosi } from '../../getElementViewOffsetPosi';
import { Multiply_act } from '../DataDefine/sourceData';
import { appearEl_datamana } from './cla_appearEl_dataMana';
// eslint-disable-next-line no-unused-vars
import { appear_Direct } from '../DataDefine/sourceData';
const appearEl_manaTag = 'appearEl_mana';

class appearEl_mana extends appearEl_datamana {
  get [Symbol.toStringTag]() {
    return appearEl_manaTag;
  }

  /**
   *
   * @param {HTMLElement} element
   * @param {appear_Direct} direct
   */
  constructor(element, direct) {
    super(element, direct);
  }

  setstaticCss() {
    remove_class(this.targetEl, 'disnone');
    let curEl_posi = getElementViewOffsetPosi(this.targetEl);
    // remove_class(this.targetEl, 'disnone', true);

    // 最大 长度
    let maxWidth = curEl_posi.width;

    // 最大 高度
    let maxHeight = curEl_posi.height;

    let cur_animation_obj = new animation_obj();

    cur_animation_obj.name = this.appearEl_anima_cla;

    // let curEl_style_obj = new fromToAnima_keyframeObj(this.targetEl);
    /** ${curEl_style_obj.toStringStyle()}     */
    // add_class(this.targetEl, 'disnone');

    let Multiply_act_direct = Multiply_act[this.direct];

    let ret = `
    .${cur_animation_obj.name} {
        ${cur_animation_obj.toCssString()}

        box-sizing: border-box;
        /**overflow: hidden;*/

        animation-name: ${cur_animation_obj.keyframeName} , 
        ${cur_animation_obj.name}_mar_top_keyframe        ,
        ${cur_animation_obj.name}_opacity                 ,
        ${cur_animation_obj.name}_font_size;
    }

    @keyframes ${cur_animation_obj.keyframeName}{
      0%{
          width: ${Multiply_act_direct[0] * maxWidth}px;
          height: ${Multiply_act_direct[1] * maxHeight}px;
      }
      100%{
          width: ${maxWidth}px;
          height: ${maxHeight}px;
      }
    }
    
    @keyframes ${cur_animation_obj.name}_mar_top_keyframe{    
        0%{
            margin: 0;
            padding: 0;
        }
    }
        
    @keyframes ${cur_animation_obj.name}_opacity {   
        0%{
            opacity: 0;
        }
    }

    @keyframes ${cur_animation_obj.name}_font_size {   
        0%{
            font-size: 0px;
        }    
        40%{
            font-size: 0px;
        }
    }`;

    // console.log(ret);

    return ret;
  }
}

export { appearEl_mana };
